<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<div class="main-content">
    <div class="main-content-inner">
        <%@include file="/WEB-INF/common/back/breadcrumb.jsp" %>
        <div class="page-content">
            <div id="line" style="width: 100%;height:500px;"></div>
        </div>
    </div>
</div>
<script src="${contextPath}/static/echarts.min.js"></script>
<script>
    var curveChart = echarts.init(document.getElementById('line'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '表记录统计'
        },
        tooltip: {},
        legend: {
            show:true,
            data: ['表名']
        },
        xAxis: {
            axisLabel: {
                show: true,
                interval: 0,
                rotate: 20,
                textStyle: {
                    color: function (value, index) {
                        return 'red';
                    }
                }
            },
            data: []
        },
        yAxis: {},
        series: [{
            name: '记录数',
            type: 'bar',
            data: []
        }]
    };

    initCurveChart(curveChart, option);

    function initCurveChart(myChart, option) {
        // 异步加载数据
        $.get('${contextPath}/back/demo/chartData').done(function (data) {
            if (data.data == undefined) {
                option.xAxis.data = [];
            }
            else {
                option.xAxis.data = data.data.x;
                option.series[0].data = data.data.y;
            }
            myChart.setOption(option);
        });

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>